<!DOCTYPE HTML>
<html>

<head><meta name="generator" content="Hexo 3.9.0">
	<link rel="bookmark" type="image/x-icon" href="/blog/img/logo_miccall.png">
	<link rel="shortcut icon" href="/blog/img/logo_miccall.png">
	
			    <title>
    我的博客
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/blog/css/mic_main.css">
    <link rel="stylesheet" href="/blog/css/dropdownMenu.css">
    <meta name="keywords" content="zhangjin">
    
    	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
	 
    <noscript>
        <link rel="stylesheet" href="/blog/css/noscript.css">
    </noscript>
    <style type="text/css">
        body:before {
          content: ' ';
          position: fixed;
          top: 0;
          background: url('/blog/img/bg.jpg') center 0 no-repeat;
          right: 0;
          bottom: 0;
          left: 0;
          background-size: cover; 
        }
    </style>

			    
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
  


    <script src="/blog/js/jquery.min.js"></script>
    <script src="/blog/js/jquery.scrollex.min.js"></script>
    <script src="/blog/js/jquery.scrolly.min.js"></script>
    <script src="/blog/js/skel.min.js"></script>
    <script src="/blog/js/util.js"></script>
    <script src="/blog/js/main.js"></script>
	
</head>
    
		
<!-- Layouts -->



<!--  代码渲染  -->
<link rel="stylesheet" href="/css/prism_coy.css">
<link rel="stylesheet" href="/css/typo.css">
<!-- 文章页 -->
<body class="is-loading">
    <!-- Wrapper 外包 s-->
    <div id="wrapper" class="fade-in">
        <!-- Intro 头部显示 s -->
        <!-- Intro 头部显示 e -->
        <!-- Header 头部logo start -->
        <header id="header">
    <a href="/blog/" class="logo">MICCALL</a>
</header>
        <!-- Nav 导航条 start -->
        <nav id="nav" class="special">
            <ul class="menu links">
			<!-- Homepage  主页  --> 
			<li>
	            <a href="/blog/" rel="nofollow">主页</a>
	        </li>
			<!-- categories_name  分类   --> 
	        
	        <li class="active">
	            <a href="#s1">分类</a>
	                    <ul class="submenu">
	                        <li>
	                        <a class="category-link" href="/blog/categories/WeChat/">WeChat</a></li><li><a class="category-link" href="/blog/categories/blog/">blog</a></li><li><a class="category-link" href="/blog/categories/project/">project</a>
	                    </li></ul>
	        </li>
	        
	        <!-- archives  归档   --> 
	        
	        
		        <!-- Pages 自定义   -->
		        
		        <li>
		            <a href="/blog/about/" title="简历">
		                简历
		            </a>
		        </li>
		        
		        <li>
		            <a href="/blog/gallery/" title="图库">
		                图库
		            </a>
		        </li>
		        


            </ul>
            <!-- icons 图标   -->
			<ul class="icons">
                    
                    <li>
                        <a title="github" href="https://github.com/namezj" target="_blank" rel="noopener">
                            <i class="icon fa fa-github"></i>
                        </a>
                    </li>
                    
                    <li>
                        <a title="500px" href="http://500px.com" target="_blank" rel="noopener">
                            <i class="icon fa fa-500px"></i>
                        </a>
                    </li>
                    
			</ul>
</nav>

        <div id="main">
            <div class="post_page_title_img" style="height: 25rem;background-image: url(/blog/images/248904-106.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;">
                <a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2>My CSDN</h2></a>
            </div>
            <!-- Post -->
            <div class="typo" style="padding: 3rem;">
                <p>这是我的个人博客记录了一些工作及学习上的笔记，暂放几篇以做展示</p>
<h2 id="我的博客-CSDN"><a href="#我的博客-CSDN" class="headerlink" title="我的博客 CSDN"></a>我的博客 <a href="https://blog.csdn.net/qq_40482686" target="_blank" rel="noopener">CSDN</a></h2><h3 id="视频背景"><a href="#视频背景" class="headerlink" title="视频背景"></a>视频背景</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line">&lt;!doctype html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot;</span><br><span class="line">          content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;</span><br><span class="line">    &lt;title&gt;视频背景&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        * &#123;</span><br><span class="line">            margin: 0;</span><br><span class="line">            padding: 0;</span><br><span class="line">        &#125;</span><br><span class="line">        video &#123;</span><br><span class="line">            display: block;</span><br><span class="line">        &#125;</span><br><span class="line">        video#bgvid &#123;</span><br><span class="line">            position: fixed;</span><br><span class="line">            right: 0;</span><br><span class="line">            bottom: 0;</span><br><span class="line">            min-width: 100%;</span><br><span class="line">            min-height: 100%;</span><br><span class="line">            width: auto;</span><br><span class="line">            height: auto;</span><br><span class="line">            z-index: -100;</span><br><span class="line">            /*视频无法加载时用图片*/</span><br><span class="line">            /*background: url(polina.jpg) no-repeat;*/</span><br><span class="line">            background-size: cover;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">    &lt;!--[if lt IE 9]&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        document.createElement(&apos;video&apos;);</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    &lt;![endif]--&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;!--&lt;video autoplay loop poster=&quot;polina.jpg&quot; id=&quot;bgvid&quot;&gt;</span><br><span class="line">    你的浏览器不支持</span><br><span class="line">    &lt;source src=&quot;polina.webm&quot; type=&quot;video/webm&quot;&gt;</span><br><span class="line"></span><br><span class="line">    &lt;source src=&quot;polina.mp4&quot; type=&quot;video/mp4&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;/video&gt;--&gt;</span><br><span class="line">&lt;video autoplay loop muted id=&quot;bgvid&quot;&gt;</span><br><span class="line">&lt;!--    &lt;source src=&quot;polina.webm&quot; type=&quot;video/webm&quot;&gt;--&gt;</span><br><span class="line">    &lt;source src=&quot;polina.mp4&quot; type=&quot;video/mp4&quot;&gt;</span><br><span class="line">&lt;/video&gt;</span><br><span class="line">&lt;div class=&quot;&quot; style=&quot;color: #fff;&quot;&gt;这是背景&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<h3 id="flex属性"><a href="#flex属性" class="headerlink" title="flex属性"></a>flex属性</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">flex-direction  //flex-direction属性决定主轴的方向（即项目的排列方向）。</span><br><span class="line">flex-wrap</span><br><span class="line">//默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</span><br><span class="line"></span><br><span class="line">flex-flow</span><br><span class="line">//flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</span><br><span class="line"></span><br><span class="line">justify-content</span><br><span class="line">align-items</span><br><span class="line">align-content</span><br></pre></td></tr></table></figure>

<blockquote>
<p>flex-direction</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">flex-direction: row | row-reverse | column | column-reverse;</span><br><span class="line"></span><br><span class="line">row（默认值）：主轴为水平方向，起点在左端。</span><br><span class="line">row-reverse：主轴为水平方向，起点在右端。</span><br><span class="line">column：主轴为垂直方向，起点在上沿。</span><br><span class="line">column-reverse：主轴为垂直方向，起点在下沿。</span><br></pre></td></tr></table></figure>

<blockquote>
<p>flex-wrap</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">flex-wrap: nowrap | wrap | wrap-reverse;</span><br><span class="line"></span><br><span class="line">nowrap（默认）：不换行。</span><br><span class="line">wrap：换行，第一行在上方。</span><br><span class="line">wrap-reverse：换行，第一行在下方。</span><br></pre></td></tr></table></figure>

<blockquote>
<p>flex-flow</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">//flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</span><br><span class="line"></span><br><span class="line">flex-flow: &lt;flex-direction&gt; &lt;flex-wrap&gt;;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>justify-content属性</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">//justify-content属性定义了项目在主轴上的对齐方式。</span><br><span class="line"></span><br><span class="line">justify-content: flex-start | flex-end | center | space-between | space-around;</span><br><span class="line"></span><br><span class="line">lex-start（默认值）：左对齐</span><br><span class="line">flex-end：右对齐</span><br><span class="line">center： 居中</span><br><span class="line">space-between：两端对齐，项目之间的间隔都相等。</span><br><span class="line">space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</span><br></pre></td></tr></table></figure>

<blockquote>
<p>align-items属性</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">//align-items属性定义项目在交叉轴上如何对齐。</span><br><span class="line">align-items: flex-start | flex-end | center | baseline | stretch;</span><br><span class="line"></span><br><span class="line">flex-start：交叉轴的起点对齐。</span><br><span class="line">flex-end：交叉轴的终点对齐。</span><br><span class="line">center：交叉轴的中点对齐。</span><br><span class="line">baseline: 项目的第一行文字的基线对齐。</span><br><span class="line">stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</span><br></pre></td></tr></table></figure>

<blockquote>
<p>align-content属性</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">//align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</span><br><span class="line">align-content: flex-start | flex-end | center | space-between | space-around | stretch;</span><br><span class="line"></span><br><span class="line">flex-start：与交叉轴的起点对齐。</span><br><span class="line">flex-end：与交叉轴的终点对齐。</span><br><span class="line">center：与交叉轴的中点对齐。</span><br><span class="line">space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</span><br><span class="line">space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</span><br><span class="line">stretch（默认值）：轴线占满整个交叉轴。</span><br></pre></td></tr></table></figure>


            </div>

            <!-- Post Comments -->
            

        </div>
        <!-- Copyright 版权 start -->
                <div id="copyright">
            <ul>
                <li>&copy;Powered By <a href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
                <li>Design: <a href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
            </ul>
            
                <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
			
        </div>
    </div>
</body>



 	
</html>
